import { css } from './styles.js';
import { render } from './html.js';
import { bindEvents, selectItem, getMenuItems } from './scripts.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';

class LeftMenu extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        
        // 初始化选中状态
        this.selectedItem = 'featured'; // 默认选中精选
        
        // 定义菜单项配置
        this.menuItems = getMenuItems();

        this.render();
        this.bindEvents();
    }
    
    render() {
        this.shadowRoot.innerHTML = `
            <style>${css}</style>
            ${render(this.selectedItem, this.menuItems)}
        `;
    }

    renderClear(){
        this.shadowRoot.innerHTML = "";
    }
    
    bindEvents() {
        bindEvents(this.shadowRoot, this.selectedItem, this.menuItems, this);
    }
    
    selectItem(value) {
        selectItem(value, this.selectedItem, this.menuItems, this);
    }
}

window.customElements.define('left-menu', LeftMenu);